<template>
	<div class="workflow-container">
		<div class="workflow-mask" v-if="isShow"></div>
		<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
			<div class="workflow">
				<!-- 顶部工具栏 -->
				<!-- <Tool @tool="onToolClick" /> -->
				<div class="workflow-tool flex items-center justify-between pr-2">
					<div class="flex items-center">
						<div style="width: 220px"><el-input v-model="helpName" size="small" placeholder="请输入方案名称" /></div>
						<el-select clearable v-model="optValue" @change="optChange" class="m-2" placeholder="选择已有方案" size="small">
							<el-option v-for="item in helpData" :key="item.id" :label="item.titleContent" :value="item.id" />
						</el-select>

						<el-upload
							ref="upload"
							:show-file-list="false"
							v-model:file-list="fileList"
							class="upload-demo"
							:action="fileUploadUrl"
							:limit="2"
							accept=".doc,.docx"
							:auto-upload="true"
							:on-success="uploadSuccess"
						>
							<el-button v-if="!currentWord" type="primary" plain size="small">上传word</el-button>
							<el-button v-if="currentWord" type="primary" plain size="small">替换word</el-button>
						</el-upload>
						<div class="w-2"></div>
						<span>{{ currentWord }}</span>
						<div class="w-2"></div>
						<img v-if="currentWord" src="/src/assets/svgicon/yulan.svg" width="25" alt="" @click="toPreviewWord" />
					</div>
					<el-button v-if="!optValue" type="primary" size="small" @click="createHelp">创建 </el-button>
					<div v-if="optValue" class=" flex ">
						<el-button  type="primary" size="small" @click="createHelp">修改 </el-button>
						<el-popconfirm  title="是否确定删除?" @confirm="delHelp">
								<template #reference>
								<el-button
									size="small"
									type="danger"
								>
								删除
							</el-button>
								</template>
							</el-popconfirm>
					</div>
				</div>
				<!-- 左侧导航区 -->
				<div class="workflow-content">
					<div class="workflow-left">
						<el-scrollbar>
							<div
								:ref="setLeftNavRefs"
								v-for="(val, key) in leftNavList"
								:key="val.id"
								:style="{ height: val.isOpen ? 'auto' : '50px', overflow: 'hidden' }"
								class="workflow-left-id"
							>
								<div class="workflow-left-title" @click="onTitleClick(val)">
									<span>{{ val.title }}</span>
									<i :class="val.isOpen ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
									<!-- <SvgIcon :name="val.isOpen ? 'ele-ArrowDown' : 'ele-ArrowRight'" /> -->
								</div>
								<div class="workflow-left-item" v-for="(v, k) in val.children" :key="k" :data-name="v.name" :data-icon="v.icon" :data-id="v.id">
									<div class="workflow-left-item-icon">
										<i :class="v.icon" class="workflow-icon-drag"></i>
										<!-- <SvgIcon :name="v.icon" class="workflow-icon-drag" /> -->
										<div class="font10 pl5 name">{{ v.name }}</div>
									</div>
								</div>
							</div>
						</el-scrollbar>
					</div>

					<!-- 右侧绘画区 -->
					<div class="workflow-right" ref="workflowRightRef">
						<div
							v-for="(v, k) in jsplumbData.nodeList"
							:key="v.nodeId"
							:id="v.nodeId"
							:data-node-id="v.nodeId"
							:class="v.class"
							:style="{ left: v.left, top: v.top }"
							@click="onItemCloneClick(k)"
							@contextmenu.prevent="onContextmenu(v, k, $event)"
						>
							<div class="workflow-right-box" :class="{ 'workflow-right-active': jsPlumbNodeIndex === k }">
								<div class="workflow-left-item-icon">
									<!-- <SvgIcon :name="v.icon" class="workflow-icon-drag" /> -->
									<i :class="v.icon" class="workflow-icon-drag"></i>
									<div class="font10 pl5 name">{{ v.name }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 节点右键菜单 -->
		<Contextmenu :dropdown="dropdownNode" ref="contextmenuNodeRef" @current="onCurrentNodeClick" />
		<!-- 线右键菜单 -->
		<Contextmenu :dropdown="dropdownLine" ref="contextmenuLineRef" @current="onCurrentLineClick" />
		<!-- 抽屉表单、线 -->
		<Drawer ref="drawerRef" @label="setLineLabel" @node="setNodeContent" />

		<!-- 顶部工具栏-帮助弹窗 -->
		<Help ref="helpRef" />
	</div>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive, computed, onMounted, onUnmounted, nextTick, ref, onBeforeMount } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { jsPlumb } from 'jsplumb';
import Sortable from 'sortablejs';
import Tool from './component/tool/index.vue';
import Help from './component/tool/help.vue';
import Contextmenu from './component/contextmenu/index.vue';
import Drawer from './component/drawer/index.vue';
import commonFunction from '/@/utils/commonFunction';
import { leftNavList } from './js/mock';
import { jsplumbDefaults, jsplumbMakeSource, jsplumbMakeTarget, jsplumbConnect } from './js/config';
import Assert from '/@/utils/shf/Assert';
import HttpReqApi from '/@/utils/shf/http/HttpReqApi';
import { stat } from 'fs';

// 定义接口来定义对象的类型
interface NodeListState {
	id: string | number;
	nodeId: string | undefined;
	class: HTMLElement | string;
	left: number | string;
	top: number | string;
	icon: string;
	name: string;
}
interface LineListState {
	sourceId: string;
	targetId: string;
	label: string;
}
interface XyState {
	x: string | number;
	y: string | number;
}
interface WorkflowState {
	workflowRightRef: HTMLDivElement | null;
	leftNavList: any[];
	dropdownNode: XyState;
	dropdownLine: XyState;
	isShow: boolean;
	jsPlumb: any;
	jsPlumbNodeIndex: null | number;
	jsplumbDefaults: any;
	jsplumbMakeSource: any;
	jsplumbMakeTarget: any;
	jsplumbConnect: any;
	jsplumbData: {
		nodeList: Array<NodeListState>;
		lineList: Array<LineListState>;
	};
	optValue: string;
	helpName: string;
	fileUploadUrl: string;
	fileList: [];
	currentWord: string;
	helpData: any[];
}

export default defineComponent({
	name: 'pagesWorkflow',
	components: { Tool, Contextmenu, Drawer, Help },
	setup() {
		const leftNavRefs = [];
		const setLeftNavRefs = (el: any) => {
			leftNavRefs.push(el);
		};
		const contextmenuNodeRef = ref();
		const contextmenuLineRef = ref();
		const drawerRef = ref();
		const helpRef = ref();
		// const stores = useTagsViewRoutes();
		// const storesThemeConfig = useThemeConfig();
		// const { themeConfig } = storeToRefs(storesThemeConfig);
		// const { isTagsViewCurrenFull } = storeToRefs(stores);
		const { copyText } = commonFunction();
		const state = reactive<WorkflowState>({
			currentWord: '',
			workflowRightRef: null as HTMLDivElement | null,
			leftNavList: [],
			dropdownNode: { x: '', y: '' },
			dropdownLine: { x: '', y: '' },
			isShow: false,
			jsPlumb: null,
			jsPlumbNodeIndex: null,
			jsplumbDefaults,
			jsplumbMakeSource,
			jsplumbMakeTarget,
			jsplumbConnect,
			jsplumbData: {
				nodeList: [],
				lineList: [],
			},
			optValue: '',
			helpName: '',
			fileUploadUrl: '',
			fileList: [],
			helpData: [],
		});
		// 设置 view 的高度
		const setViewHeight = computed(() => {
			// let { isTagsview } = themeConfig.value;
			// if (isTagsViewCurrenFull.value) {
			// 	return `30px`;
			// } else {
			// 	if (isTagsview) return `114px`;
			// 	else return `80px`;
			// }
			return `80px`;
		});
		// 设置 宽度小于 768，不支持操
		const setClientWidth = () => {
			const clientWidth = document.body.clientWidth;
			clientWidth < 768 ? (state.isShow = true) : (state.isShow = false);
		};
		// 左侧导航-数据初始化
		const initLeftNavList = () => {
			state.leftNavList = leftNavList;
			state.jsplumbData = {
				nodeList: [
					
				],
				lineList: [
					
				],
			};
		};
		// 左侧导航-初始化拖动
		const initSortable = () => {
			// console.log('initSortable = >>>>>>> ',leftNavRefs);
			// (window as any)["leftNavRefs"] = leftNavRefs;
			(leftNavRefs as any).forEach((v) => {
				Sortable.create(v as HTMLDivElement, {
					group: {
						name: 'vue-next-admin-1',
						pull: 'clone',
						put: false,
					},
					animation: 0,
					sort: false,
					draggable: '.workflow-left-item',
					forceFallback: true,
					onEnd: function (evt: any) {
						const { name, icon, id } = evt.clone.dataset;
						const { layerX, layerY, clientX, clientY } = evt.originalEvent;
						const el = state.workflowRightRef!;
						const { x, y, width, height } = el.getBoundingClientRect();
						if (clientX < x || clientX > width + x || clientY < y || y > y + height) {
							ElMessage.warning('请把节点拖入到画布中');
						} else {
							// 节点id（唯一）
							const nodeId = Math.random().toString(36).substr(2, 12);
							// 处理节点数据
							const node = {
								nodeId,
								left: `${layerX - 40}px`,
								top: `${layerY - 15}px`,
								class: 'workflow-right-clone',
								name,
								icon,
								id,
							};
							// 右侧视图内容数组
							state.jsplumbData.nodeList.push(node);
							// 元素加载完毕时
							nextTick(() => {
								// 整个节点作为source或者target
								state.jsPlumb.makeSource(nodeId, state.jsplumbMakeSource);
								// // 整个节点作为source或者target
								state.jsPlumb.makeTarget(nodeId, state.jsplumbMakeTarget, jsplumbConnect);
								// 设置节点可以拖拽（此处为id值，非class）
								state.jsPlumb.draggable(nodeId, {
									containment: 'parent',
									stop: (el: any) => {
										state.jsplumbData.nodeList.forEach((v) => {
											if (v.nodeId === el.el.id) {
												// 节点x, y重新赋值，防止再次从左侧导航中拖拽节点时，x, y恢复默认
												v.left = `${el.pos[0]}px`;
												v.top = `${el.pos[1]}px`;
											}
										});
									},
								});
							});
						}
					},
				});
			});
		};
		// 初始化 jsPlumb
		const initJsPlumb = () => {
			(<any>jsPlumb).ready(() => {
				state.jsPlumb = (<any>jsPlumb).getInstance({
					detachable: false,
					Container: 'workflow-right',
				});
				state.jsPlumb.fire('jsPlumbDemoLoaded', state.jsPlumb);
				// 导入默认配置
				state.jsPlumb.importDefaults(state.jsplumbDefaults);
				// 会使整个jsPlumb立即重绘。
				state.jsPlumb.setSuspendDrawing(false, true);
				// 初始化节点、线的链接
				initJsPlumbConnection();
				// 点击线弹出右键菜单
				state.jsPlumb.bind('contextmenu', (conn: any, originalEvent: MouseEvent) => {
					originalEvent.preventDefault();
					const { sourceId, targetId } = conn;
					const { clientX, clientY } = originalEvent;
					state.dropdownLine.x = clientX;
					state.dropdownLine.y = clientY;
					const v: any = state.jsplumbData.nodeList.find((v) => v.nodeId === targetId);
					const line: any = state.jsplumbData.lineList.find((v) => v.sourceId === sourceId && v.targetId === targetId);
					v.type = 'line';
					v.label = line.label;
					contextmenuLineRef.value.openContextmenu(v, conn);
				});
				// 连线之前
				state.jsPlumb.bind('beforeDrop', (conn: any) => {
					const { sourceId, targetId } = conn;
					const item = state.jsplumbData.lineList.find((v) => v.sourceId === sourceId && v.targetId === targetId);
					if (item) {
						ElMessage.warning('关系已存在，不可重复连接');
						return false;
					} else {
						return true;
					}
				});
				// 连线时
				state.jsPlumb.bind('connection', (conn: any) => {
					const { sourceId, targetId } = conn;
					for (const current of state.jsplumbData.lineList) {
						if(current.sourceId == sourceId && current.targetId == targetId)
						return;
					}
					state.jsplumbData.lineList.push({
						sourceId,
						targetId,
						label: '',
					});
				});
				// 删除连线时回调函数
				state.jsPlumb.bind('connectionDetached', (conn: any) => {
					const { sourceId, targetId } = conn;
					state.jsplumbData.lineList = state.jsplumbData.lineList.filter((line) => {
						if (line.sourceId == sourceId && line.targetId == targetId) {
							return false;
						}
						return true;
					});
				});
			});
		};
		// 初始化节点、线的链接
		const initJsPlumbConnection = () => {
			// 节点

			state.jsplumbData.nodeList.forEach((v) => {
				// 整个节点作为source或者target
				state.jsPlumb.makeSource(v.nodeId, state.jsplumbMakeSource);
				// 整个节点作为source或者target
				state.jsPlumb.makeTarget(v.nodeId, state.jsplumbMakeTarget, jsplumbConnect);
				// 设置节点可以拖拽（此处为id值，非class）
				state.jsPlumb.draggable(v.nodeId, {
					containment: 'parent',
					stop: (el: any) => {
						state.jsplumbData.nodeList.forEach((v) => {
							if (v.nodeId === el.el.id) {
								// 节点x, y重新赋值，防止再次从左侧导航中拖拽节点时，x, y恢复默认
								v.left = `${el.pos[0]}px`;
								v.top = `${el.pos[1]}px`;
							}
						});
					},
				});
			});
			
			state.jsplumbData.lineList.forEach((v) => {
			state.jsPlumb.connect(
					{
						source: v.sourceId,
						target: v.targetId,
						label: v.label,
					},
					state.jsplumbConnect
				);
			});
		};
		// 左侧导航-菜单标题点击
		const onTitleClick = (val: any) => {
			val.isOpen = !val.isOpen;
		};
		// 右侧内容区-当前项点击
		const onItemCloneClick = (k: number) => {
			state.jsPlumbNodeIndex = k;
		};
		// 右侧内容区-当前项右键菜单点击
		const onContextmenu = (v: any, k: number, e: MouseEvent) => {
			state.jsPlumbNodeIndex = k;
			const { clientX, clientY } = e;
			state.dropdownNode.x = clientX;
			state.dropdownNode.y = clientY;
			v.type = 'node';
			v.label = '';
			let item: any = {};
			state.leftNavList.forEach((l) => {
				if (l.children) if (l.children.find((c: any) => c.id === v.id)) item = l.children.find((c: any) => c.id === v.id);
			});
			v.from = item.form;
			contextmenuNodeRef.value.openContextmenu(v);
		};
		// 右侧内容区-当前项右键菜单点击回调(节点)
		const onCurrentNodeClick = (item: any) => {
			const { contextMenuClickId, nodeId } = item;
			if (contextMenuClickId === 0) {
				const nodeIndex = state.jsplumbData.nodeList.findIndex((item) => item.nodeId === nodeId);
				state.jsplumbData.nodeList.splice(nodeIndex, 1);
				state.jsPlumb.removeAllEndpoints(nodeId);
				state.jsPlumbNodeIndex = null;
			} else if (contextMenuClickId === 1) {
				drawerRef.value.open(item);
			}
		};
		// 右侧内容区-当前项右键菜单点击回调(线)
		const onCurrentLineClick = (item: any, conn: any) => {
			const { contextMenuClickId } = item;
			const { endpoints } = conn;
			const intercourse: any = [];
			endpoints.forEach((v: any) => {
				intercourse.push({
					id: v.element.id,
					innerText: v.element.innerText,
				});
			});
			item.contact = `${intercourse[0].innerText}(${intercourse[0].id}) => ${intercourse[1].innerText}(${intercourse[1].id})`;
			if (contextMenuClickId === 0) state.jsPlumb.deleteConnection(conn);
			else if (contextMenuClickId === 1) drawerRef.value.open(item, conn);
		};
		// 设置线的 label
		const setLineLabel = (obj: any) => {
			const { sourceId, targetId, label } = obj;
			const conn = state.jsPlumb.getConnections({
				source: sourceId,
				target: targetId,
			})[0];
			conn.setLabel(label);
			if (!label || label === '') {
				conn.addClass('workflow-right-empty-label');
			} else {
				conn.removeClass('workflow-right-empty-label');
				conn.addClass('workflow-right-label');
			}
			state.jsplumbData.lineList.forEach((v) => {
				if (v.sourceId === sourceId && v.targetId === targetId) v.label = label;
			});
		};
		// 设置节点内容
		const setNodeContent = (obj: any) => {
			const { nodeId, name, icon } = obj;
			// 设置节点 name 与 icon
			state.jsplumbData.nodeList.forEach((v) => {
				if (v.nodeId === nodeId) {
					v.name = name;
					v.icon = icon;
				}
			});
			// 重绘
			nextTick(() => {
				state.jsPlumb.setSuspendDrawing(false, true);
			});
		};
		// 顶部工具栏-当前项点击
		const onToolClick = (fnName: String) => {
			switch (fnName) {
				case 'help':
					onToolHelp();
					break;
				case 'download':
					onToolDownload();
					break;
				case 'submit':
					onToolSubmit();
					break;
				case 'copy':
					onToolCopy();
					break;
				case 'del':
					onToolDel();
					break;
				case 'fullscreen':
					onToolFullscreen();
					break;
			}
		};
		// 顶部工具栏-帮助
		const onToolHelp = () => {
			nextTick(() => {
				helpRef.value.open();
			});
		};
		// 顶部工具栏-下载
		const onToolDownload = () => {
			// const { globalTitle } = themeConfig.value;
			// const href = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(state.jsplumbData, null, '\t'));
			// const aLink = document.createElement('a');
			// aLink.setAttribute('href', href);
			// aLink.setAttribute('download', `${globalTitle}工作流.json`);
			// aLink.click();
			// aLink.remove();
			// ElMessage.success('下载成功');
		};
		// 顶部工具栏-提交
		const onToolSubmit = () => {
			// console.log(state.jsplumbData);
			ElMessage.success('数据提交成功');
		};
		// 顶部工具栏-复制
		const onToolCopy = () => {
			copyText(JSON.stringify(state.jsplumbData));
		};
		// 顶部工具栏-删除
		const onToolDel = () => {
			state.jsplumbData.nodeList.forEach((v) => {
				state.jsPlumb.removeAllEndpoints(v.nodeId);
			});
			state.jsPlumb.deleteEveryConnection();
			state.jsPlumb.deleteEveryEndpoint();

			nextTick(() => {
				state.jsplumbData = {
					nodeList: [],
					lineList: [],
				};
				// ElMessage.success('清空画布成功');
			});
			// ElMessageBox.confirm('此操作将清空画布，是否继续？', '提示', {
			// 	confirmButtonText: '清空',
			// 	cancelButtonText: '取消',
			// })
			// 	.then(() => {

			// 	})
			// 	.catch(() => {});
		};
		const onToolReset = (tooldata) => {
			state.jsPlumb.deleteEveryConnection();
			state.jsPlumb.deleteEveryEndpoint();

			state.jsplumbData.nodeList.forEach((v) => {
				state.jsPlumb.removeAllEndpoints(v.nodeId);
			});
			
			
			nextTick(() => {

				let jsonObj = JSON.parse(tooldata.joinContent);

				state.jsplumbData = {
					nodeList: jsonObj.nodeList,
					lineList: jsonObj.lineList,
				};
				nextTick(() => {
					initJsPlumbConnection();
				});

				
			});
		};
		const optChange = (e) => {
			console.log('optChange e = ', state.optValue);
			if (!state.optValue) {
				state.currentWord = '';
				state.helpName = '';
				onToolDel();
				return;
			}
			for (const data of state.helpData) {
				if (data.id == e) {
					state.currentWord = data.abstractContent;
					state.helpName = data.titleContent;
					onToolReset(data);
				}
			}
		};
		const uploadSuccess = (e) => {
			console.log('uploadSuccess = ', e);

			state.currentWord = e.fileName;
			if (state.currentWord) state.fileUploadUrl = window['reqUrl'] + '/equip/uploadWord' + '?beforeWord=' + state.currentWord;
		};
		const createHelp = async () => {
			// console.log('createHelp = ',state.nodeList);
			if (!state.helpName) {
				Assert.isFalse(true, '方案名称未填');
				return;
			}
			if (!state.currentWord) {
				Assert.isFalse(true, '未上传word');
				return;
			}
			console.log('state.jsplumbData = ', state.jsplumbData);
			let jsonStr = JSON.stringify(state.jsplumbData);
			let contentData = {
				joinCompany: '无',
				joinGroup: '无',
				joinGoods: '无',
				joinTarget: '无',
				creatName: '',
				titleContent: '',
				abstractContent: '',
				joinContent: '',
				creatTime: '',
			};
			contentData.joinContent = jsonStr;
			contentData.titleContent = state.helpName;
			contentData.abstractContent = state.currentWord;
			if (!state.optValue) {
				await HttpReqApi.addHelpscheme({ ...contentData });
				ElMessage.success({
					message: '提交成功',
					type: 'success',
					duration: 2000,
				});
				state.currentWord = "";
				state.helpName = "";
				state.optValue = '';
				onToolDel();
				getHelpList();
				return;
			}
			await HttpReqApi.updateHelpscheme({ ...contentData, id: parseInt(state.optValue + '') });
			ElMessage.success({
				message: '修改成功',
				type: 'success',
				duration: 2000,
			});
			state.currentWord = "";
			state.helpName = "";
			state.optValue = '';
			onToolDel();
			getHelpList();
		};

		const delHelp = async ()=>{
			if (!state.optValue) 
			return;
			await HttpReqApi.delHelpSchemes({id:parseInt(state.optValue+"")});
			state.currentWord = '';
			state.helpName = '';
			state.optValue = '';
			getHelpList();
			onToolDel();
		}

		// 顶部工具栏-全屏
		const onToolFullscreen = () => {
			// stores.setCurrenFullscreen(true);
		};
		onBeforeMount(async () => {
			state.fileUploadUrl = window['reqUrl'] + '/equip/uploadWord';
			getHelpList();
		});
		const getHelpList = async () => {
			let alldata: any = await HttpReqApi.getHelpschemesAll();
			let list: any[] = [];
			for (const vo of alldata) {
				list.push({ id: vo.id, titleContent: vo.titleContent, joinContent: vo.joinContent, abstractContent: vo.abstractContent });
			}
			// state.optValue = '';
			state.helpData = list;
		};
		const toPreviewWord = () => {
			console.log('toPerivewWord');
			let url = (window as any).reqUrl + '/uploadword/' + state.currentWord;
			window.location.href = window['previewWordUrl'] + '/onlinePreview?url=' + encodeURIComponent((window as any).Base64.encode(url));
		};
		// 页面加载时
		onMounted(async () => {
			let list1:any = await HttpReqApi.getEconomicTargets();
			let list2:any = await HttpReqApi.getZhanbeiwuzi();
			let list3:any = await HttpReqApi.getZhuanyeduiwu();
			let list4:any = await HttpReqApi.getZhihuijigou();
			leftNavList[0].children = [];
			for (let index = 0; index < list4.length; index++) {
				const element = list4[index];
				(leftNavList[0].children as any).push({
					icon: 'iconfont icon-gerenzhongxin',
					name: element.author,
					id: '1'+element.id
				});
			}
			leftNavList[1].children = [];
			for (let index = 0; index < list3.length; index++) {
				const element = list3[index];
				(leftNavList[1].children as any).push({
					icon: 'iconfont icon-icon-',
					name: element.author,
					id: '2'+element.id
				});
			}
			leftNavList[2].children = [];
			for (let index = 0; index < list2.length; index++) {
				const element = list2[index];
				(leftNavList[2].children as any).push({
					icon: 'iconfont icon-shidu',
					name: element.author,
					id: '3'+element.id
				});
			}
			leftNavList[3].children = [];
			for (let index = 0; index < list1.length; index++) {
				const element = list1[index];
				(leftNavList[3].children as any).push({
					icon: 'iconfont icon-shuju',
					name: element.title,
					id: '4'+element.id
				});
			}
			await initLeftNavList();
			initSortable();
			initJsPlumb();
			setClientWidth();
			window.addEventListener('resize', setClientWidth);
		});
		// 页面卸载时
		onUnmounted(() => {
			window.removeEventListener('resize', setClientWidth);
		});
		return {
			setViewHeight,
			setClientWidth,
			setLineLabel,
			setNodeContent,
			onTitleClick,
			onItemCloneClick,
			onContextmenu,
			onCurrentNodeClick,
			onCurrentLineClick,
			contextmenuNodeRef,
			contextmenuLineRef,
			leftNavRefs,
			setLeftNavRefs,
			drawerRef,
			helpRef,
			onToolClick,
			uploadSuccess,
			optChange,
			createHelp,
			delHelp,
			toPreviewWord,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.workflow-container {
	position: relative;
	.workflow {
		display: flex;
		height: 100%;
		width: 100%;
		flex-direction: column;
		.workflow-content {
			display: flex;
			height: calc(100% - 35px);
			.workflow-left {
				width: 220px;
				height: 100%;
				border-right: 1px solid var(--el-border-color-light, #ebeef5);
				:deep(.el-collapse-item__content) {
					padding-bottom: 0;
				}
				.workflow-left-title {
					height: 50px;
					display: flex;
					align-items: center;
					padding: 0 10px;
					border-top: 1px solid var(--el-border-color-light, #ebeef5);
					color: var(--el-text-color-primary);
					cursor: default;
					span {
						flex: 1;
					}
				}
				.workflow-left-item {
					display: inline-block;
					width: calc(50% - 15px);
					position: relative;
					cursor: move;
					margin: 0 0 10px 10px;
					.workflow-left-item-icon {
						height: 35px;
						display: flex;
						align-items: center;
						transition: all 0.3s ease;
						padding: 5px 10px;
						border: 1px dashed transparent;
						background: #f5f5ff;
						border-radius: 3px;
						i,
						.name {
							color: var(--el-text-color-secondary);
							transition: all 0.3s ease;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
						&:hover {
							transition: all 0.3s ease;
							border: 1px dashed var(--el-color-primary);
							background: var(--el-color-primary-light-9);
							border-radius: 5px;
							i,
							.name {
								transition: all 0.3s ease;
								color: var(--el-color-primary);
							}
						}
					}
				}
				& .workflow-left-id:first-of-type {
					.workflow-left-title {
						border-top: none;
					}
				}
			}
			.workflow-right {
				flex: 1;
				position: relative;
				overflow: hidden;
				height: 100%;
				background-image: linear-gradient(90deg, rgb(156 214 255 / 15%) 10%, rgba(0, 0, 0, 0) 10%),
					linear-gradient(rgb(156 214 255 / 15%) 10%, rgba(0, 0, 0, 0) 10%);
				background-size: 10px 10px;
				.workflow-right-clone {
					position: absolute;
					.workflow-right-box {
						height: 35px;
						align-items: center;
						color: var(--el-text-color-secondary);
						padding: 0 10px;
						border-radius: 3px;
						cursor: move;
						transition: all 0.3s ease;
						min-width: 94.5px;
						background: var(--el-color-white);
						border: 1px solid var(--el-border-color-light, #ebeef5);
						.workflow-left-item-icon {
							display: flex;
							align-items: center;
							height: 35px;
						}
						&:hover {
							border: 1px dashed var(--el-color-primary);
							background: var(--el-color-primary-light-9);
							transition: all 0.3s ease;
							color: var(--el-color-primary);
							i {
								cursor: Crosshair;
							}
						}
					}
					.workflow-right-active {
						border: 1px dashed var(--el-color-primary);
						background: var(--el-color-primary-light-9);
						color: var(--el-color-primary);
					}
				}
				:deep(.jtk-overlay):not(.aLabel) {
					padding: 4px 10px;
					border: 1px solid var(--el-border-color-light, #ebeef5) !important;
					color: var(--el-text-color-secondary) !important;
					background: var(--el-color-white) !important;
					border-radius: 3px;
					font-size: 10px;
				}
				:deep(.jtk-overlay.workflow-right-empty-label) {
					display: none;
				}
			}
		}
	}
	.workflow-mask {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		&::after {
			content: '手机版不支持 jsPlumb 操作';
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1;
			background: rgba(255, 255, 255, 0.9);
			color: #666666;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
